<template>
    <el-row class="headerBtn">
      <el-col class="record_list" :span="24">
        <slot />
        <div class="record_list_data" v-for="(item,index) in btnList" :key="index" >
          <el-badge :value="item.num != 0?(item.num > 99 ? '99+': item.num):''" class="badge">
               <el-button :class="{active:tabIndex==index}" @click="$emit('changetabIndex',index)">{{item.content}}</el-button>
          </el-badge>
        </div>
        <div class="rightslot">
        </div>
      </el-col>
    </el-row>
</template>
<script>
import { Badge } from 'element-ui'
export default {
    name:'headerBreadcrumb',
    props:{
        btnList:{ type : Array, default : ()=>{ return [] } },
        tabIndex:{type : Number, default : ()=>{ return 0 } },
    },
    methods:{
        
    },
    components: {
        ElBadge: Badge
      }
}
</script>

<style lang="stylus" scoped>
.headerBtn
    width 100%
    display flex
    min-height 60px
    background #ffffff
    padding: 3px 0px 17px 20px
    box-sizing border-box
    .record_list
      display flex
      flex-wrap wrap
      button
        height: 30px;
        padding 4px
        box-sizing border-box
        margin 17px 6px 0 0 
        line-height: 30x;
        border-radius: 3px;
        background-color #fff
        color: rgba(49, 150, 250, 1);
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(49, 150, 250, 1);
        box-sizing border-box
        >>>span 
          font-size 12px
      .active 
        background-color: rgba(49, 150, 250, 1);
        color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(255, 255, 255, 0);
</style>
<style lang="stylus">
.el-badge__content.is-fixed 
    position: absolute;
    top: 18px;
    right: 20px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
    z-index 999
</style>